import { useLoader } from '@react-three/fiber';
import { BoxGeometry, TextureLoader } from 'three';

interface TexturedBoxProps {
  position: [number, number, number];
  dimensions: [number, number, number];
  textureUrl: string;
}

export function TexturedBox({
  position,
  dimensions,
  textureUrl,
}: TexturedBoxProps) {
  const texture = useLoader(TextureLoader, textureUrl);
  texture.colorSpace = 'srgb';

  // 创建一个带边框的组
  return (
    <group position={position}>
      {/* 纹理盒子 */}
      <mesh castShadow receiveShadow>
        <boxGeometry args={dimensions} />
        <meshStandardMaterial
          map={texture}
          color="#ffffff"
          emissive="#ffffff"
          emissiveIntensity={0.2}
          metalness={0.2}
          roughness={0.3}
          transparent
          opacity={0.95}
        />
      </mesh>

      {/* 边框 */}
      <lineSegments>
        <edgesGeometry args={[new BoxGeometry(...dimensions)]} />
        <lineBasicMaterial color="#22c55e" linewidth={1} />
      </lineSegments>
    </group>
  );
} 